<template>
  <div class="Image-container">
    <img v-if="!everythingdone" class="placeholder" :src="placeholder" alt="" >
    <img class="origin" :src="src" alt="" @load="onloaded" :style="{opacity:onoriginloaded,transition:duration+'ms'}">
  </div>
</template>

<script>
export default {
    data(){
        return {
            originloaded:false,//原图是否加载完成
            everythingdone:false,
        }
    },
    props:{
        src:{
            type:String,
            required:true,
        },
        placeholder:{
            type:String,
            required:true,
        },
        duration:{
            type:Number,
            default:500,
        }
    },
    computed:{
        onoriginloaded(){
            return this.originloaded?1:0;
        },
    },
    methods:{
        onloaded(){
           this.originloaded=true;
           setTimeout(()=>{//等待原图过度完成
            this.everythingdone=true;
            this.$emit('load');//抛出事件
           },this.duration);
        }
    }
}
</script>

<style lang="less" scoped>
.Image-container{
    position: relative;
    width: 110%;
    height: 110%;
    z-index: -1;
    overflow: hidden;
    transition: 0.5s;
    .origin{
        width: 100%;
        height: 100%;
        left:0;
        top:0;
        position: absolute;
        object-fit: cover;
    }
    .placeholder{
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
        position: absolute;
        opacity: 1;
        object-fit: cover;
        filter:blur(2vw);
    }
}
</style>